<template>
    <el-table :data="data" row-key="_id" :header-cell-style="{
        backgroundColor: '#e5eeff',
        color: '#515a6e',
         fontWeight: 'normal'
    }"
      @selection-change="handleSelectionChange"
    >

<!-- 复选框 -->
<el-table-column v-if="checkbox" type="selection" width="55px"/>

        <el-table-column v-for="item in columns" :label="item.label" :prop="item.prop">
            <template v-if="$slots[item.prop]" #default="scope">
                <slot :name="item.prop" :row="scope.row"></slot>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-if="pageData" class="page-position">
        <el-pagination v-model:current-page="pageData!.currentPage" v-model:page-size="pageData!.pageSize"
            :page-sizes="[5, 10, 20, 30, 40]" :total="total" :background="true"
            layout="total, sizes, prev, pager, next, jumper" />



    </div>

</template>

<script setup lang="ts">
import { defineEmits } from 'vue';
let emit= defineEmits(['oncheckboxchange'])


type columnitem = {
    label: string;
    prop: string;
}

//ts的类型约束
let { data = [], columns = [],checkbox=false } = defineProps<{
    data: any[],
    columns: columnitem[]
    total?: number,
    checkbox?:boolean
}>()


let pageData = defineModel<pagequery>();
console.log('pageData', pageData.value);


//当复选框发生改变时执行
let  handleSelectionChange=(val:any[])=>{
console.log(val);
//调用父组件的方法，将选中的数据传给父组件
emit('oncheckboxchange',val);

}










</script>

<style scoped>
.page-position {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>